<template>
  <div class="commonTable">
    <!--        modal在solt中会被执行两次-->
    <set-table-header v-if="tableHeaderVisible" ref="tableHeaderModal"
                      @closeTableHeaderModal="closeTableHeaderModal" :this-table-name="thisTableName"
                      :this-table-header-data="thisTableHeaderData"
                      :this-table-header-data-middel="thisTableHeaderDataMiddel"/>
    <a-config-provider :locale="locale">
      <a-table
        style="word-break:break-all;"
        :columns="columnsData"
        :data-source="newTableArr"
        :pagination="isPagination ? pagination : false"
        @change="handleTableChange"
        :row-selection="isRowsSelectVisible ? {
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          getCheckboxProps: getCheckboxProps,
          type: selectType,
          columnWidth: 50,
        } : null"
        :loading="loadVisible"
        :scroll="{ x: scrollx ? scrollX : '100%', y: scrollY }"
        :rowKey="dataRowKeys"
        :customRow="rowHover"
        :rowClassName="tableRowClass"
        :components="draggerComponents"
        ref="commonTable"
      >
        <!-- 表头设置按钮 x: 'max-content', , y: 'calc(100vh - 474px)'  y: 'calc(100vh - ' + height + 'px)'  trigger="click" -->
        <span slot="customTitle" class="settingStyle">
          <!-- <a-icon type="setting" @click="headerConfig" style="font-size: 20px"/> -->
          <a-popover>
            <template slot="content">
              <div class="table-header" @click="clearAllFilter"><a-icon type="sync"/>清空筛选</div>
              <div class="table-header" @click="headerConfig"><a-icon type="setting"/>表头设置</div>
            </template>
            <a-button style="border: none;padding: 0;">
              <a-icon type="menu" style="font-size: 20px"/>
            </a-button>
          </a-popover>
        </span>
        <!-- img -->
        <template slot="img" slot-scope="text, record">
          <img :src="record.healthstatusimg" alt=""/>
        </template>
        <!-- name 待办中心 操作 -->
        <template slot="name" slot-scope="text, record">
          <div style="display: flex; justify-content: flex-start;">
            <a-tooltip>
              <template slot="title">
                {{ text }}
              </template>
              <a @click="routerPage(record)">{{ text }}</a>
            </a-tooltip>
            <img src="@/assets/todo/eye.png" style="width: 16px;height: 14px;cursor: pointer;display: inline-block; margin: 5px 0 0 3px;"
                    v-if="reviewDeliver && (record.subjectOid ? record['subjectOid'].indexOf('ProjectTaskBook') > -1 : '')" @click="routerTaskBook(record)"/>
          </div>
        </template>
        <!-- 移入显示tooltip -->
        <span slot="customRender" slot-scope="text">
          <a-tooltip placement="topLeft">
            <template slot="title">
              {{ text }}
            </template>
            {{ text }}
          </a-tooltip>
        </span>
        <!-- 筛选 -->
        <template
          slot="filterDropdown"
          slot-scope="{
            setSelectedKeys,
            selectedKeys,
            confirm,
            clearFilters,
            column,
          }"
        >
          <div class="filterItem">
            <div class="topItem">
              <div class="itemTitle">快捷操作</div>
              <ul>
                <li @click="sortData(column, 'upchange')">
                  <a-icon type="bars"/>
                  升序排列
                </li>
                <li @click="sortData(column, 'downchange')">
                  <a-icon type="bars"/>
                  降序排列
                </li>
              </ul>
            </div>
            <div class="botItem">
              <div class="itemTitle">
                <span class="right">筛选条件</span>
                <span class="left"
                      @click="clearSelect([], selectedKeys, confirm, column, setSelectedKeys, clearFilters)">清空</span>
              </div>
              <!-- select下拉框 multiple :default-value-->
              <div class="selectItem" v-if="column.fieldType === 'Select'">
                <div class="title">{{ column.title }}选择</div>
                <!-- 根据接口返回fieldValue -->
                <div class="selectContent" v-if="column.name === 'healthstatus'">
                  <a-select
                    mode="multiple"
                    v-model="column.selectValue"
                    placeholder="请选择"
                    style="width: 100%"
                    @change="
                      (value) =>
                        handleSelect(
                          value,
                          selectedKeys,
                          confirm,
                          column,
                          setSelectedKeys
                        )
                    "
                  >
                    <a-select-option
                      v-for="(item, index) in selectData"
                      :key="index"
                      :value="item.name"
                    >
                      {{ item.value }}
                    </a-select-option>
                  </a-select>
                </div>
                <div class="selectContent" v-else>
                  <a-select
                    mode="multiple"
                    v-model="column.selectValue"
                    placeholder="请选择"
                    style="width: 100%"
                    @change="
                      (value) =>
                        handleSelect(
                          value,
                          selectedKeys,
                          confirm,
                          column,
                          setSelectedKeys
                        )
                    "
                  >
                    <a-select-option
                      v-for="(item, index) in selectData"
                      :key="index"
                      :value="item"
                    >
                      {{ item }}
                    </a-select-option>
                  </a-select>
                </div>
              </div>
              <!-- input搜索框 -->
              <div class="selectItem" v-else-if="column.fieldType === 'Input' && column.dataType === 'String'">
                <div class="title">{{ column.title }}查询</div>
                <div class="inputContent">
                  <a-input-search
                    placeholder="请输入"
                    v-model="column.InputValue"
                    @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                    @search="() => inputSearch(selectedKeys, confirm, column, setSelectedKeys)"
                    @pressEnter="() => inputSearch(selectedKeys, confirm, column, setSelectedKeys)"
                  />
                </div>
              </div>
              <!-- input搜索框 -->
              <div class="selectItem"
                   v-else-if="column.fieldType === 'Input' && (column.dataType.indexOf('Number') != -1)">
                <div class="title">{{ column.title }}查询</div>
                <div class="inputContent">
                  <a-input-search
                    placeholder="请输入"
                    v-model="column.InputValue"
                    @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                    @search="() => inputSearch(selectedKeys, confirm, column, setSelectedKeys)"
                    @pressEnter="() => inputSearch(selectedKeys, confirm, column, setSelectedKeys)"
                  />
                </div>
              </div>
              <!-- 时间框 -->
              <div class="selectItem" v-else-if="column.fieldType === 'Date' || column.fieldType === 'Date_Time'">
                <div class="title">{{ column.title }}查询</div>
                <div class="inputContent">
                  <a-range-picker v-model="column.DateValue"
                                  @change="(date) => timeSelect( date, selectedKeys, confirm, column, setSelectedKeys) "/>
                </div>
              </div>
            </div>
          </div>
        </template>
      </a-table>
    </a-config-provider>
  </div>
</template>
<script>
import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
// import dateLocale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import setTableHeader from '@/components/setTableHeader/index';
import _ from "lodash";
import moment from 'moment';
import { draggerTable } from '@/mixins/draggerTable'
export default {
  name: "commonTable",
  mixins: [draggerTable],
  data() {
    return {
      // dateLocale,
      // dateFormat:'YYYY-MM-DD',
      // components: null,
      locale: zhCN,
      selectedRowKeys: [],
      pagination: {
        page: 1, // 页码
        current: 1, // 当前页数
        defaultCurrent: 1,
        total: 0, // 总数
        pageSize: 10, //每页中显示几条数据
        pageSizeOptions: ["5", "10", "20", "30"],
        showSizeChanger: true,
        showQuickJumper: true,
        showLessItems: true,
        showTotal: (total) => `共${total}条`, //分页中显示总的数据
      },
      selectData: [], // 表头下拉框数据
      tableHeaderVisible: false,
      // nowSearchName: "",
      filterArr: [], // 选中的过滤数组
      newTableArr: this.tableData, // 新数组渲染
      // showEye: this.tableData.map(() => false),//显示交付物后的小眼睛
      showEye: {},
      scrollX: this.scrollx,
      isClickContextmenu: false,
      // filteredInfo: null, // 过滤条件
      // selectValueObj: {},
      filteredInfo: this.filterData.filteredInfo, // 过滤条件
      selectValueObj: this.filterData.selectValueObj || {},
      dropdownVisible: false, // 筛选下拉框显示隐藏
      checkColorIndex:"",
      lang: this.$store.state.i18nData.lang || 'zh',
      // columnsData: [],
    };
  },
  components: {
    setTableHeader,
  },
  /*'thisTableName---当前表格名称','thisTableHeaderData--当前表格所有表头数据','thisTableHeaderDataMiddel--当前表格存在中台的表头数据'*/
  props: {
    isTestPage: {
      type: Boolean,
      default: false
    },
    columns: {
      /*表格列头数据*/
      type: Array,
      default: () => {
        return []
      }
    },
    tableData: {
      /*表格数据*/
      type: Array,
      default: () => {
        return []
      }
    },
    reviewDeliver: {
      type: Boolean,
      default: false
    },
    selectType: {
      /*多选类型，单选或者多选*/
      type: String,
      default: 'checkbox'
    },
    loadVisible: {
      /*loading显示隐藏*/
      type: Boolean,
      default: false
    },
    isRowsSelectVisible: {
      /*首列选项显示隐藏*/
      type: Boolean,
      default: false
    },
    thisTableName: {
      type: String,
      default: '执行任务',
      // required: true
    },
    thisTableHeaderData: {
      type: Array,
      default: () => []
    },
    thisTableHeaderDataMiddel: {
      type: Array,
      default: () => []
    },
    /* 已关注数据 */
    hasAttention: {
      type: Array,
      default: () => []
    },
    dataRowKey: {
      type: String,
      default: 'onlyIndex'
    },//rowkey
    height: {
      type: Number,
      default: 474
    },
    // 是否设置点击行选中
    clickRowSelect: {
      type: Boolean,
      default: false
    },
    // 是否设置点击行高亮
    clickRowHighlight: {
      type: Boolean,
      default: true
    },
    // 是否设置行颜色
    setRowColor: {
      type: Boolean,
      default: false
    },
    scrollY: {
      default: 'calc(100vh - 421px)'
    },
    scrollx: {
      type: String | Boolean,
      default: '4000'
    },
    filterData: {
      type: Object,
      default: function () {
        return {}
      }
    },
    /*是否显示分页*/
    isPagination: {
      type: Boolean,
      default: true
    },
    // 是否允许拖拽排序
    isDragSort: {
      type: Boolean,
      default: false
    },
    defaultTagId: {
      type: String,
      default: ''
    },
    fromName: {
      type: String,
      default: ''
    }
  },
  computed: {
    testManagetype() {
      return this.$route.meta.flag
    },
    columnsData() {
      if (this.columns.length > 0) {
        let filteredInfo = this.filteredInfo || {}
        this.columns.forEach((item) => {
          if (item.dataIndex !== 'setting') {
            if (this.lang === 'zh') {
              this.$set(item, 'title', item.displayName)
            } else {
              if (item.enName) {
                this.$set(item, 'title', item.enName)
              } else {
                this.$set(item, 'title', item.displayName)
              }
            }
            
            item.dataIndex = item.name
            item.align = "left";
            // item.ellipsis = true;
            item.selectValue = this.selectValueObj[item.title] || []
            item.InputValue = this.selectValueObj[item.title] || ''
            item.DateValue = this.selectValueObj[item.title] || []
            item.filteredValue = filteredInfo[item.name] || null
            // this.$set(item, "selectValue", []);
            // this.$set(item, 'width', typeof item.width === 'number' && item.width ? item.width : 120) 
            /**
            * 项目列表列宽
            */
            if (this.lang === 'zh') {
              if(item.dataIndex == 'healthstatus' || item.dataIndex == 'state' || 
              item.dataIndex == 'importantgrade' || item.dataIndex == 'complexity' || 
              item.dataIndex == 'market' || item.dataIndex == 'creator' || item.dataIndex == 'createByTDMData' || item.dataIndex == 'category'){
                this.$set(item, 'width', typeof item.width === 'number' && item.width ? item.width : 65) 
              } else if (item.dataIndex == 'projectshortname' || item.dataIndex == 'sampleNumber' 
              || item.dataIndex == 'model'  || item.dataIndex == 'planeNo') {
                this.$set(item, 'width', typeof item.width === 'number' && item.width ? item.width : 85) 
              } else {
                this.$set(item, 'width', typeof item.width === 'number' && item.width ? item.width : 120) 
              }
            } else {
              this.$set(item, 'width', typeof item.width === 'number' && item.width ? item.width : 120) 
            }
            if (!item.scopedSlots) {
              item.scopedSlots = {
                customRender: "tooltips"
              };
            }
            if(item.dataIndex == 'workItem.theme'){//流程名称宽度
              item.width = 240
            }
            if(item.dataIndex == 'operation'){//操作宽度
                item.width = 100
            }
          }
          if(item.dataIndex == 'workItem.theme'){//流程名称宽度
            item.width = 300
            item.scopedSlots = {
              customRender: "workItemTheme"
            };
            // item.ellipsis = false
          }
          // Input Select Date
          // console.log(item.fieldType, item.dataType)
          if (item.fieldType === 'Select') {
            item.onFilter = (value, record) => {
              return record[item.dataIndex] && record[item.dataIndex].includes(value);
            }
            /**获取表头中下拉框数据 */
            item.onFilterDropdownVisibleChange = (visible) => {
              if (visible) {
                this.selectData = item.fieldValue;
              } else {
                this.dropdownVisible = false
              }
            };
          } else if (item.fieldType === 'Input') {
            item.onFilter = (value, record) => {
              return record[item.dataIndex] && record[item.dataIndex].includes(value);
            }
          } else if (item.fieldType === 'Date' || item.fieldType === 'Date_Time') {
            let count = 1
            let startTimeStr = ''
            item.onFilter = (value, record) => {
              if (count % 2 === 0) {
                let startTime = new Date(startTimeStr).getTime()
                let endTime = new Date(value).getTime()
                let nowTime = new Date(record[item.dataIndex]).getTime()
                return nowTime >= startTime && nowTime <= endTime
              } else {
                startTimeStr = value
              }
              count++
            }
          }
          // 健康状态 下拉框筛选英文改为中文 只设置一次 第二次不再设置
          if (item.name === "healthstatus" && !item.fieldValue[0].name) {
            const colorData = {
              'RED': '红',
              'UNAVAILABLE': '灰',
              'YELLOW': '黄',
              'GREEN': '绿'
            }
            let colorKyeData = []
            item.fieldValue.forEach(color => {
              colorKyeData.push({
                name: color,
                value: colorData[color]
              })
            })
            item.fieldValue = colorKyeData
          }
          // 健康状态 下拉框筛选英文改为中文
        })
        // .map(item => item.name)
        // // console.log(this.columns)
        this.$emit('filterTable', {
          selectValueObj: this.selectValueObj,
          filteredInfo
        })
        return this.columns;
      }else {
        return []
      }
    },
  },
  watch: {
    '$store.state.i18nData.lang': function(v) {
      this.lang = v
    },
    tableData(val, oldVal) {
      this.newTableArr = val
      this.selectedRowKeys = []
    },
    hasAttention(val, oldVal) {
      this.hasAttention = val
    },
    filterData: {
      handler(val) {
        this.filteredInfo = val.filteredInfo || {} // 过滤条件
        this.selectValueObj = val.selectValueObj || {}
      },
      deep: true 
    },
    fromName(val) {
      console.log(val, 515);
    }
  },
  created(){
    let filterData = JSON.parse(sessionStorage.getItem('filterData') || '{}').projectManage
    if (filterData && this.defaultTagId) {
      this.$emit('filterData', filterData[this.defaultTagId])
      this.filteredInfo = filterData[this.defaultTagId].filteredInfo || {} // 过滤条件
      this.selectValueObj = filterData[this.defaultTagId].selectValueObj || {}
    }
  },
  mounted() {
    document.body.addEventListener('click', (e) => {
      if (this.isClickContextmenu) {
        this.selectedRowKeys = []
        let fileSingleData = sessionStorage.getItem('fileSingle') ? JSON.parse(sessionStorage.getItem('fileSingle')) : {}
        this.$emit("routerContextmenu", false, null, fileSingleData.tableArr);
        this.isClickContextmenu = false
      }
    })
    if (this.newTableArr.length) {
      this.setScrollX()
    }
  },
  updated() {
    if (this.newTableArr.length || this.columns.length) {
      this.setScrollX()
    }
  },
  methods: {
    moment,
    routerunqualifiedNum(record,flag) {
      this.$emit("routerunqualifiedNum",record,flag)
    },
    routerIssue(val,type) {
      this.$emit("routerunqualifiedNum",val,type)
    },
    downReport(record,key,title){
      this.$emit('downReport',record,key,title)
    },
    handleChange(value, index, column) {
      const target = this.newTableArr[index]
      if (target) {
        target[column] = (value == null || value.length == 0) ? null : value;
        this.$set(this.newTableArr,index,target)
      }
    },
    dataRowKeys(record) {
      return record[this.dataRowKey]
    },
    setScrollX() {
      this.$nextTick(() => {
        if (!this.scrollx) return
        let len = this.columns.length
        // if (len <= 5) {
        //   this.scrollX = '100%'
        // } else 
        if (len <= 7) {
          this.scrollX =  '100%'
        } else if (len <= 10) {
          this.scrollX =  '100%'
        } else if (len <= 15) {
          this.scrollX = 2550
        } else if (len <= 20) {
          this.scrollX = 3400
        } else if (len <= 25) {
          this.scrollX = 4250
        } else if (len <= 30) {
          this.scrollX = 5100
        } else if (len <= 35) {
          this.scrollX = 5950
        } else if (len <= 40) {
          this.scrollX = 6800
        } else {
          this.scrollX = 7650
        }
        // console.log(len, this.scrollX)
      })
    },
    clearAllFilter() {
      if (this.filteredInfo) {
        this.$message.success('清除成功')
      }
      this.$set(this, 'filteredInfo', null)
      this.$set(this, 'selectValueObj', {})
      sessionStorage.removeItem('filterData')
    },
    // 跳到任务书
    routerTaskBook(val) {
      this.$emit("routerTaskBook", val)
    },
    // 分页
    handleTableChange(pagination, filters) {
      this.$store.commit('SETPAGEDATA', pagination.current)
      //判断是否分页
      if(pagination && pagination.page) {
        this.pagination.current = pagination.current;
        this.pagination.page = pagination.page;
        this.pagination.pageSize = pagination.pageSize;
      }
      
      this.$set(this, 'filteredInfo', filters)
      this.$emit('paginationFun', pagination, filters)
      // this.setHeaderWidth()
    },
    headerConfig() {//开启表头设置弹框
      this.tableHeaderVisible = true
      // this.$refs.tableHeaderModal.init()//默认加载设置表头modal中的数据
    },
    closeTableHeaderModal() {//关闭表头设置弹框
      this.tableHeaderVisible = false
    },
    // 多选
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.$emit('selectedRows', selectedRows,selectedRowKeys)
      this.$store.commit('getSelectedTableData', selectedRows)//将选中的表格数据存入vuex中
      
    },
    // 默认选中
    getCheckboxProps(record) {
      // this.$emit("getCheckboxProps", record)
      let ableds = false
      if (this.hasAttention.indexOf(record.oid) !== -1) {
        ableds = true
        return ({
          props: {
            disabled: ableds
          },
        });
      } else {
        if(record.subjectOid){
          return ({
            props: {
              disabled: record['subjectOid'].indexOf("ProjectTaskBook") > -1,
              //项目组合独有的参数isSelectedOrigin
              defaultChecked: record.isselectedorigin  || record.isSelectedOrigin
            },
          });
        }
        return ({
          props: {
            disabled: record['assignment.plannableStatus'] === '已完成' || record['assignment.plannableStatus'] === '待审核', // Column configuration not to be checked
            name: record['assignment.plannableStatus'],
            defaultChecked: record.isselectedorigin  || record.isSelectedOrigin
          },
        });
      }
    },
    handleBlur(value, selectedKeys, confirm, column, setSelectedKeys) {
      if (setSelectedKeys) {
        setSelectedKeys(value)
      }
      this.setFilterInfo(column, value)
      this.dropdownVisible = false
      confirm()
    },
    // 多选状态下，点击标签X时回调
    handleDeselect(value, selectedKeys, confirm, column, setSelectedKeys) {
      selectedKeys = selectedKeys.filter(item => item !== value)
      this.setFilterInfo(column, selectedKeys)
      setSelectedKeys(selectedKeys)
      confirm()
    },
    // 表头下拉框选择
    handleSelect(value, selectedKeys, confirm, column, setSelectedKeys) {
      if (column.fieldType === 'Input') {
        this.$set(this.selectValueObj, column.title, value[0])
      } else {
        this.$set(this.selectValueObj, column.title, value)
      }
      if (setSelectedKeys) {
        setSelectedKeys(value)
      }
      confirm();
    },
    // 清除
    clearSelect(value, selectedKeys, confirm, column, setSelectedKeys, clearFilters) {
      this.$set(column, "selectValue", []);
      this.$set(column, "InputValue", '');
      this.$set(column, "DateValue", []);
      // console.log(this.filterArr)
      this.handleSelect(value, selectedKeys, confirm, column, setSelectedKeys)
      clearFilters()
    },
    // 时间框查询
    timeSelect(date, selectedKeys, confirm, column, setSelectedKeys) {
      let timeArr = []
      if (date.length > 0) {
        timeArr = [date[0].format('YYYY-MM-DD'), date[1].format('YYYY-MM-DD')]
      } else {
        timeArr = []
      }
      this.handleSelect(timeArr, null, confirm, column, setSelectedKeys)
      // value, selectedKeys, confirm, column, setSelectedKeys
    },
    // 搜索框查询
    inputSearch(selectedKeys, confirm, column, setSelectedKeys) {
      this.handleSelect(selectedKeys, null, confirm, column)
    },
    // 升序&降序
    sortData(col, sortType) {
      if (col.dataType === 'String') {
        this.textSort(this.newTableArr, col.name, sortType)
      } else if (col.dataType === 'Date' || col.dataType.indexOf('Date') != -1) {
        this.timeSort(this.newTableArr, col.name, sortType)
      } else if (col.dataType.indexOf('Number') != -1) {
        this.numSort(this.newTableArr, col.name, sortType)
      }
    },
    // 数值排序
    numSort(arr, property, sortType) {
      let aInfo = a[property] ? a[property] : 0
      let bInfo = b[property] ? b[property] : 0
      arr.sort(function (a, b) {
        if (sortType === 'upchange') {
          return aInfo - bInfo
        } else {
          return bInfo - aInfo
        }
      })
    },
    // 中文排序
    textSort(arr, property, sortType) {
      arr.sort(function (a, b) {
        let aInfo = a[property] ? a[property] : ''
        let bInfo = b[property] ? b[property] : ''
        if (sortType === 'upchange') {
          return aInfo.localeCompare(bInfo, 'zh')
        } else {
          return bInfo.localeCompare(aInfo, 'zh')
        }
      })
    },
    // 时间排序
    timeSort(arr, property, sortType) {
      
      arr.sort(function (a, b) {
        let aInfo = a[property] ? a[property] : ''
        let bInfo = b[property] ? b[property] : ''
        if (sortType === 'upchange') {
          return aInfo > bInfo ? 1 : -1
        } else {
          return aInfo < bInfo ? 1 : -1
        }
      })
    },
    // 跳转当项目首页
    routerPage(val) {
      this.$emit("routerPage", val);
    },
    //主题跳转
    routerPageThem(val) {
      this.$emit("routerPageThem", val);
    },
    // 跳转项目首页
    routerToProject(val) {
      this.$emit("routerToProject", val);
    },
    //交付物跳转
    routerDeliverable(val) {
      this.$emit("routerDeliverable", val);
    },
    //操作跳转
    routerActionPage(val) {
      this.$emit("routerActionPage", val);
    },
    //下载操作(财务)
    routerDownload(val) {
      this.$emit("routerDownload", val);
    },
    //标准成本
    routerActionBzcb(value) {
      this.$emit("routerActionBzcb",value)
    },
    //行移入显示小眼睛
    rowHover(record, index) {
      // console.log(record,index)
      const _this = this
      return {
        style: {
          cursor: this.isDragSort ? 'pointer' : 'default'
        },
        on: {
          // 鼠标移入
          mouseenter: (event) => {
            this.showEye = record
            if (!this.isDragSort) return
            // 兼容IE
            var ev = event || window.event
            ev.target.draggable = true
          },
          // 开始拖拽
          dragstart: (event) => {
            if (!this.isDragSort) return
            // 兼容IE
            var ev = event || window.event
            // 阻止冒泡
            ev.stopPropagation()
            // 得到源目标数据
            this.sourceIndex = index
          },
          // 拖动元素经过的元素
          dragover: (event) => {
            if (!this.isDragSort) return
            // 兼容 IE
            var ev = event || window.event
            // 阻止默认行为
            ev.preventDefault()
          },
          // 鼠标松开
          drop: (event) => {
            if (!this.isDragSort) return
            // 兼容IE
            var ev = event || window.event
            // 阻止冒泡
            ev.stopPropagation()
            // 得到目标数据
            this.targetIndex = index
            if (this.isDragSort) {
              let d = this.tableData.splice(this.sourceIndex, 1)
              this.tableData.splice(this.targetIndex, 0, ...d)
            }
          },
          // mouseenter: (event) => {
          //   // this.showEye[index] = true
          //   // this.showEye = _.clone(this.showEye)
          //   this.showEye = record
          // },  // 鼠标移入行
          mouseleave: (event) => {
            // this.showEye[index] = false
            // this.showEye = _.clone(this.showEye)
            this.showEye = {}
          },
          contextmenu(event) {
            console.log(index)
            _this.checkColorIndex = index
            event.preventDefault()
            _this.isClickContextmenu = true
            _this.selectedRowKeys = [index]
            _this.$emit("routerContextmenu", true, event, [record],index)
          },
          click: (event) => {
            if (this.clickRowSelect) {
              this.selectedRowKeys = [record.oid]
              // 行点击
              this.$emit('clickRow', [record])
            }
            // if (this.clickRowHighlight) {
            //   // console.log(record, event.target.parentElement.style.background = '#f0f7ff')
            //   if(event.target.parentNode  === null) return false;
            //   let allTr = event.target.parentNode.parentNode.children;
            //   Array.prototype.forEach.call(allTr, function (dom, i) {
            //       dom.classList.remove("current");
            //   });
            //   event.target.parentNode.classList.add("current");
            // }
          }
        },
      };
    },
    tableRowClass(record, index) {
      // return index === this.checkColorIndex ? 'checkColor':''
      if (this.setRowColor && record.healthStatus) {
        return record.healthStatus
      }
    },
    historyVersionBtn(record) {
      this.$emit('historyVersionBtn', record)
    }
  },
};
</script>
<style lang="less" scoped>
// /deep/ .checkColor{
//   background-color:lightcyan;
// }
.commonTable {
  position: relative;
  /deep/ .ant-table-column-title {
    .settingStyle {
      cursor: pointer;
      :hover {
        color: #386bd7;
      }
      .ant-btn {
        width: auto;
        background: #f6f7f8;
      }
    }
  }
  .settingStyle {
    // position: absolute;
    // top: -46px;
    // right: 0;
    &:hover {
      color: #386bd7;
    }
    .ant-btn{
      background: transparent;
    }
  }
  // 动态设置行字体颜色
  /deep/ .ant-table-tbody {
    tr.UNAVAILABLE {
      color: #999999;
    }
    tr.GREEN {
      color: #3dbd7d;
    }
    tr.YELLOW {
      color: #f68800;
    }
    tr.RED {
      color: #f04134;
    }
    tr:hover > td {
      background: #f0f7ff !important;
    }
    // 点击高亮
    tr.current > td {
      background: #f0f7ff;
    }
  }
  // 动态设置行字体颜色
  /deep/ .ant-table-tbody > tr > td {
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    a {
      display: block;
    }
  }
  /deep/ .ant-table-tbody > tr > td {
    word-wrap: break-word;
    word-break: break-all;
    > span > div, a {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  /deep/ .ant-table-fixed-right tr {
    justify-content: center;
    // th {
    //   border: none;
    // }
  }
  /deep/ .ant-table-scroll table {
      min-width: auto
  }
  /deep/ .ant-table-body {
    //样式穿透
    overflow-x: auto !important;
    // .ant-table-row {
    //   td {
    //     padding: 12px 16px;
    //   }
    // }
  }
  /deep/ .ant-table-thead > tr > th {
    border-right: 1px solid #eee;
  }
  /deep/ .ant-table-thead > tr > th .anticon-filter,
  .ant-table-thead > tr > th .ant-table-filter-icon {
    margin-left: 5px;
    width: 1vw;
    right: auto;
  }
  /deep/ .ant-table-fixed {
    // width: auto !important;
  }
  /deep/ .ant-table-fixed-right {
    box-shadow: none;
    .ant-table-row-cell-break-word {
      padding: 0px;
      text-align: center;
      background: none;
    }
    .ant-table-thead {
      background: #fafafa;
    }
    // .ant-table-tbody > tr > td {
    //   border-bottom: none;
    // }
  }
  .table-wrapper {
    .settingStyle {
      float: right;
    }
  }
}
.filterItem {
  width: 260px;
  padding: 12px 0px;
  text-align: left;
  .topItem {
    border-bottom: 1px solid #eee;
    padding: 0px 12px;
    .itemTitle {
      color: #999999;
      font-size: 14px;
      margin: 6px 0px;
    }
    ul {
      li {
        color: #333333;
        font-size: 14px;
        margin: 6px 0px;
        cursor: pointer;
      }
    }
    ul li:hover {
      color: #386bd7;
    }
  }
  .botItem {
    padding: 0px 12px;
    .itemTitle {
      margin: 6px 0px;
      display: flex;
      justify-content: space-between;
      .right {
        font-size: 14px;
        color: #999999;
      }
      .left {
        font-size: 12px;
        color: #386bd7;
        cursor: pointer;
      }
    }
    .selectItem {
      .title {
        color: #333333;
        font-size: 14px;
        margin: 4px 0px;
      }
    }
  }
}
.deliverable_div {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .taskNum_task {
    min-width: 18px;
    height: 18px;
    border-radius: 100px;
    background-color: #c0c0c0;
    margin-right: 5px;
    padding: 0px 3px 0px 3px;
    text-align: center;
    line-height: 18px;
    color: #ffffff;
    font-size: 12px;
  }
}
.table-header{
  cursor: pointer;
  min-width: 78px;
  &:nth-of-type(1) {
    margin-bottom: 8px;
  }
  &:hover{
    color: #386bd7;
  }
  .anticon{
    font-size: 14px;
    margin-right: 8px;
  }
}
.test-manager-item {
  width: 100%
}
</style>